<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
   canvas{ position:absolute}
   canvas #canvas1{ z-index:1}
   canvas #canvas2{ z-index:2; top:0px; left:0px; display:none}
</style>
</head>

<body onLoad="window_onload()">

<canvas id="canvas1" width="360px" height="360px" "></canvas>
<canvas id="canvas2" width="200px" height="200px" "></canvas>
<script type="text/javascript">
function window_onload(){
	var canvas1 = document.getElementById("canvas1")
	var context = canvas1.getContext("2d")
	var image = new Image();
	image.src="image/1.jpg";
	image.onload=function(){
	context.drawImage(image,0,0)
	}
	canvas1.onmousemove=canvas1_onmouse_move;
}
function canvas1_onmouse_move(ev){
	var canvas1,canvas2;
	var x,y;
	canvas1=document.getElementById("canvas1");
	canvas2=document.getElementById("canvas2");
	var context=canvas2.getContext("2d");
	canvas2.style.display="inline";
	 context.clearRect(0,0,canvas2.width,canvas2.height);
	 x=ev.pageX-canvas1.offsetLeft+2;
	 y=ev.pageX-canvas1.offsetTop+2;
	 canvas2.style.left=(ev.pageX+2)+"px";
	 canvas2.style.top=(ev.pageX+2)+"px";
	 var image = new Image();
	image.src="image/1.jpg";
	context.drawImage(image,x,y,200,200,0,0,400,400)
	}
</script>
</body>
<ml>
